<template>
  <div class="tab-container">
    <el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
      <el-tab-pane v-for="item in tabMapOptions" :label="item.display_name" :key='item.key' :name="item.key">
        <span slot="label">{{item.count}} {{item.display_name}}</span>
        <keep-alive>
          <tab-pane v-if="activeName==item.key" :cv_status="item.key" :project_id="project_id" :candidate_id="candidate_id" >
          </tab-pane>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import tabPane from './cvTabPane'
import API from '@/utils/backend_api'
export default {
  name: 'cvTab',
  props: {
    project_id: {
      type: String,
      default: ''
    },
    candidate_id: {
      type: String,
      default: ''
    },
    tab: {
      type: String,
      default: 'all'
    }
  },
  components: { tabPane },
  data() {
    return {
      tabMapOptions: [
        { key: 'all', display_name: '所有人才', count: 0 },
        { key: 'add_project', display_name: '加入项目', count: 0 },
        { key: 'sent_to_manager', display_name: '已推荐给客户经理', count: 0 },
        { key: 'sent_to_client', display_name: '已推荐给客户', count: 0 },
        { key: 'interview', display_name: '面试', count: 0 },
        { key: 'interview_end', display_name: '终面', count: 0 },
        { key: 'sign_offer', display_name: 'Offer', count: 0 },
        { key: 'onboading', display_name: '入职', count: 0 },
        { key: 'sent_over', display_name: '过保证期', count: 0 },
        { key: 'out', display_name: '淘汰', count: 0 }
      ],
      activeName: this.tab,
      listQuery: {
        project_id: this.project_id,
        candidate_id: this.candidate_id
      }
    }
  },
  created() {
    this.getList()
  },
  watch: {
    project_id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (this.project_id && this.project_id !== '') {
        this.listQuery.project_id = this.project_id
        this.getList()
      }
    },
    candidate_id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (this.candidate_id && this.candidate_id !== '') {
        this.listQuery.candidate_id = this.candidate_id
        this.getList()
      }
    },
    tab: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (this.tab && this.tab !== '') {
        this.activeName = this.tab
      }
    }
  },
  methods: {
    getList() {
      if ((this.listQuery.candidate_id && this.listQuery.candidate_id !== '') ||
        (this.listQuery.project_id && this.listQuery.project_id !== '')) {
        API.cv.getCvBriefInfo(this.listQuery).then(response => {
          const cv_data = response.data
          const count_group = {
            all: 0,
            add_project: 0,
            sent_to_manager: 0,
            sent_to_client: 0,
            interview: 0,
            interview_end: 0,
            sign_offer: 0,
            onboading: 0,
            sent_over: 0,
            out: 0
          }
          cv_data.map(item => {
            if (item.cv_status) {
              count_group.all = Number(count_group.all) + 1
              count_group[item.cv_status] = Number(count_group[item.cv_status]) + 1
            }
          })
          this.tabMapOptions.map(item => {
            this.$set(item, 'count', count_group[item.key])
          })
        })
      }
    }
  }
}
</script>

<style scoped>
  .tab-container{
    margin: 0px;
  }
</style>
